<style type="text/less">
    @import "/web/public/public.less";
    #fragment-intro{
        background-color: #1c1a1b;
        width: 380px;
        &>.title{
            height: 90px;
            background: url("/web/img/text-zcbjs.png") no-repeat 25px center,#262324;
        }
        .content-wrap{
            position: relative;
            height: 470px;
        }
        ul.content-level-1{
            height: 100%;
            padding: 10px 25px;
            overflow: hidden;
            &>li{
                &+li{
                    margin-top: 30px;
                }
                &>.title{
                    font-size: 16px;
                    color: #d4af82;
                    font-weight: bold;
                    line-height: 50px;
                }
                ul.content-level-2{
                    &>li{
                        .clearfix;
                        &+li{
                            margin-top: 20px;
                        }
                        i{
                            width: 6px;
                            height: 8px;
                            background: url("/web/img/icon_triple.png") no-repeat center;
                            background-size: 100%;
                        }
                        span{
                            width: 310px;
                            color: #ffffff;
                            .fr;
                            vertical-align: top;
                            font-size: 14px;
                            line-height: 24px;
                        }
                    }
                }
            }

        }
        /* 滚动轨道 */
        .scroll_bar {
            position: absolute;
            top:0;
            right:10px;
            width: 5px;
            height: 100%;
            background-color: #1c1a1b;
        }
        /* 滚动滑块 */
        .scroll_slider {
            position: absolute;
            top: 0;
            left: 0px;
            width: 5px;
            height: 48px;
            background-color: #000000;
            border-radius:2.5px;
            opacity: .7;
        }
        .scroll_slider:hover{
            opacity: 1
        }
    }
</style>
<script src="/web/lib/less.min.js"></script>
<div id="fragment-intro">
    <div class="title"></div>
    <div class="content-wrap">
        <ul class="content-level-1">
            <#if introGroupList?? && (introGroupList?size>0)>
                <#list introGroupList as introGroup>
                    <li>
                        <div class="title">${introGroup.groupName}</div>
                        <ul class="content-level-2">
                            <#if introGroup.itemList?? && (introGroup.itemList?size>0)>
                                <#list introGroup.itemList as item>
                                    <li>
                                        <i class="triangle"></i>
                                        <span>${item.itemContent}</span>
                                    </li>
                                </#list>
                            </#if>
                        </ul>
                    </li>
                </#list>
            </#if>
        </ul>
        <div class="scroll_bar">
            <div class="scroll_slider"></div>
        </div>
    </div>

</div>
<script src="/web/lib/scrollBar.js"></script>
<script>
    new CusScrollBar({
        contentSelector: '#fragment-intro .content-level-1', //滚动内容区
        barSelector: '#fragment-intro .scroll_bar', //滚动条
        sliderSelector: '#fragment-intro .scroll_slider' //滚动滑块
    });
</script>